@page-prefix-cls: ~"@{css-prefix}page";

.@{page-prefix-cls}{
  display:flex;
  &__title{
    margin-right: 18px;
    height:@height-base;
    line-height:(@height-base - 2px);
  }

  &__opts{
    height:@height-base;
    line-height:(@height-base - 2px);
    .haloe-select{
        margin: 0 8px;
        width: 50px;
        outline:none;
        &:focus-visible{
          border-color:@color-brand-primary !important;
        }
    }
  }
  &__list{
    margin-left:auto;
    display:flex;
    list-style: none;
  }

  &-item-jump-prev, &-item-jump-next {
    &:after {
        content: "•••";
        display: block;
        letter-spacing: 1px;
        color: @color-complementary-22;
        text-align: center;
    }
  }

  &-item-jump-prev:hover {
      i:after {
          content: "\F115";
          margin-left: -8px;
      }
  }

  &-item-jump-next:hover {
      i:after {
          content: "\F11F";
          margin-left: -8px;
      }
  }


  &-item-jump-prev,
  &-item-jump-next{
      margin-right: 4px;
  }

  &-prev,
  &-next,
  &-item-jump-prev,
  &-item-jump-next {
      display: inline-block;
      vertical-align: middle;
      user-select: none;
      min-width: @btn-circle-size;
      height: @btn-circle-size;
      line-height: (@btn-circle-size - 2px);
      list-style: none;
      text-align: center;
      cursor: pointer;
      color: #666;
      font-family: Arial;
      border: 1px solid @color-border-normal1;
      border-radius: @btn-border-radius;
      transition: all @transition-time @ease-in-out;
  }
  &-item-jump-prev,
  &-item-jump-next{
      border-color: transparent;
  }

  &-prev{
    border-right:none;
    border-radius:@border-radius-base 0 0 @border-radius-base;
  }

  &-next{
    border-left:none;
    border-radius:0 @border-radius-base @border-radius-base 0;
  }

  &-prev,
  &-next {
      background-color:@color-bg-card;
      position:relative;
      a {
          color: #666;
          font-size: 14px;
      }
      &:hover {
          border-color: @color-border-normal1;
          a {
              color: @color-brand-primary;
          }
      }
  }

  &-disabled {
      cursor: @cursor-disabled;
      background-color: @color-bg-disable;
      margin-right: 1px;
      a {
          color: #ccc;
      }
      &:hover {
          border-color:@color-border-normal1;
          a {
              color: #ccc;
              cursor: @cursor-disabled;
          }
      }
  }

  &-item{
      margin:0;
      min-width:@height-base;
      height:@height-base;
      line-height:(@height-base - 2px);
      border:1px solid @color-border-normal1;
      text-align: center;
      color:@color-text-level3;
      border-radius: 0;
      cursor:pointer;
      a{
        color:inherit;
      }
      &:hover a{
        color:@color-brand-primary;
      }

      & + &{
        border-left:none;
      }

      &-active {
        border:1px solid @color-brand-primary !important;
        margin-left:-1px;
        a, &:hover a {
            color: @color-brand-primary;
        }
      }
      &:hover {
        a {
            color: @color-brand-primary;
        }
      }
  }

  &__jump{
    margin-left:5px;
    vertical-align: middle;
    input {
      display:inline-block;
      width: 50px;
      height: @height-base;
      margin: 0 8px;
      padding: 5px 8px;
      text-align: center;
      box-sizing: border-box;
      color:@color-text-level3;
      background-color:@color-bg-card;
      outline: none;
      border: 1px solid @color-border-normal1;
      border-radius: @btn-border-radius;
      transition: border-color @transition-time @ease-in-out;
      vertical-align: top;
      &:hover {
          border-color: @color-brand-primary;
      }
    }
    &__btn{
      margin:0 8px;
      display:inline-block;
      height:@btn-height-base;
      width:50px;
      height:@height-base;
      line-height:(@height-base - 2px);
      text-align:center;
      background-color:#fff;
      border-radius:@btn-border-radius;
      border:1px solid @color-border-normal1;
      color:@color-text-level3;
      &:hover{
        border-color:@color-brand-primary;
        color:@color-brand-primary;
      }
    }
  }
}

.@{page-prefix-cls} {

  @line-height:@btn-circle-size-small - 2px;

  &.mini &-total {
      height: @btn-circle-size-small;
      line-height: @line-height;
  }

  &.mini &-item {
      margin: 0;
      min-width: @btn-circle-size-small;
      height: @btn-circle-size-small;
      line-height: @line-height;
      border-radius: 0px;
      margin-left: -1px;
  }

  &.mini &-prev,
  &.mini &-next {
      margin: 0;
      margin-right: 1px;
      min-width: @btn-circle-size-small;
      height: @btn-circle-size-small;
      line-height: @line-height;
      a {
          i:after {
              height: @btn-circle-size-small;
              line-height: @line-height;
          }
      }
  }

  &.mini &-item-jump-prev,
  &.mini &-item-jump-next {
      height: @btn-circle-size-small;
      line-height: @line-height;
      margin-right: 0;
  }

  &.mini &__jump{
    input {
      width: 40px;
      height: @btn-circle-size-small;
    }
    &__btn{
      width:40px;
      height:@btn-circle-size-small;
      line-height:@line-height;
    }
  }
}
